<script setup lang="ts">
import { getDSFData } from '@/apis/home'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'

// 第三方
const dsfData: any = ref([])

onMounted(async () => {
  const dsfDataRes = await getDSFData()
  dsfData.value = dsfDataRes.data
  console.log(dsfData.value)
})
</script>
<template>
  <div id="dsf">
    <el-container style="height: 100%">
      <el-main style="overflow-x: hidden">
        <LineHeader #text>第三方平台授权</LineHeader>

        <el-card class="dsf">
          <template #header>
            <div class="card-header">
              <span>第三方平台授权</span>
            </div>
          </template>
          <div class="dsf-box">
            <div
              class="dsf-item"
              v-for="item in dsfData"
              @click="
                () => {
                  ElMessage({
                    type: 'success',
                    message: '已授权 ' + item.name + ' 账号',
                  })
                }
              "
            >
              <div class="img-box">
                <el-image style="width: 180px; border-radius: 16px" :src="item.img" />
                <h1 class="img-text">立即授权</h1>
              </div>

              <h1>{{ item.name }}</h1>
            </div>
          </div>
        </el-card>

        <div class="text-box">
          <h1>选择要授权的第三方平台</h1>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<style scoped lang="scss">
#dsf {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 16px 32px;
  box-sizing: border-box;

  .dsf {
    margin-bottom: 32px;

    .dsf-box {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .dsf-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 32px;
        margin-bottom: 32px;
        cursor: pointer;

        .img-box {
          position: relative;
          overflow: hidden;
          border: 1px solid #eee;

          .img-text {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            line-height: 60px;
            text-align: center;
            background-color: rgba(230, 247, 247);
            color: rgb(3, 179, 178);
            font-size: 20px;
            display: none;
          }
        }

        .img-box:hover {
          border: 1px solid rgb(3, 179, 178);
          .img-text {
            display: block;
          }
        }
      }
    }
  }

  .text-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    border-radius: 16px;
    background-color: #5b8cff;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
  }
}
</style>
